// SVG namespace
var svgNS = "http://www.w3.org/2000/svg";
// the SVG document handler
var documentSVG = null;
// will store the root <g> element that groups all chart elements
var chartGroup = null;
// how often to request new data from server?
var updateInterval = 1000; 
// coordinates (in pixels) used to translate the chart
var x = 50, y = 50;
// chart's dimension (in pixels) 
var height = 300, width = 500;
// chart's axis origin 
var xt1 = 0, yt1 = 0;
// chart's axis maximum values
var xt2 = 50, yt2 = 100;
// number of horizontal and vertical axis divisions
var xDivisions = 10, yDivisions = 10;
// default text width and height for initial display (recalculated 
// afterwards)
var defaultTextWidth = 30, defaultTextHeight = 20; 
// will retain references to the chart units for recalculating positions
var xIndexes = new Array(xDivisions + 1);
var yIndexes = new Array(yDivisions + 1);
// will store the text node that displays the selected chart node 
var currentNodeInfo;
// retains the latest values generated by server 
var lastX = -1, lastY = -1;
// shared svg elements 
var chartGroup, dataGroup, dataPath;

var newCoords;
function init(evt)
{
  documentSVG = evt.target.ownerDocument;
  chartGroup = documentSVG.createElementNS(svgNS,"g");
  chartGroup.setAttribute("transform","translate(100,100)");
  ground = documentSVG.createElementNS(svgNS,"rect");
  ground.setAttribute("x","0");
  ground.setAttribute("y","0");
  ground.setAttribute("width","750");
  ground.setAttribute("height","600");
  ground.setAttribute("style","fill:white;stroke:blue;stroke-width:1;opacity:0.5");
  chartGroup.appendChild(ground);
  for (var i = 0; i < 8; i++) 
  {
    t = documentSVG.createElementNS(svgNS,"g");
    xIndexes[i] = t;
    if (i < 4)
      t.setAttribute("transform","translate(" + i*120 + "," + 1 +")");
    else
      t.setAttribute("transform","translate(" + (i-4)*120 +","+ 241 +")");
    tt = documentSVG.createElementNS(svgNS,"rect");
    tt.setAttribute("x","10");
    tt.setAttribute("y","10");
    tt.setAttribute("width","100");
    tt.setAttribute("height","200");
    tt.setAttribute("style","fill:green;stroke:blue;stroke-width:1;opacity:0.5");
    t.appendChild(tt);
    chartGroup.appendChild(t);
  }
  documentSVG.documentElement.appendChild(chartGroup);
  setTimeout("updateChart()", updateInterval);
}
function updateChart()
{
  param = "";
  if (window.getURL)
    getURL("svg_chart.php" + param, handleResults);
  else
    ajaxRequest("svg_chart.php" + param, handleResults);
}

function paint()
{

  for(j=0;j<newCoords[0].length;j++)
  {
    t = documentSVG.createElementNS(svgNS,"line");
    t.setAttribute("x1", - newCoords[0][j][0] + 60);
    t.setAttribute("y1",newCoords[0][j][1] + 180);
    t.setAttribute("x2", - newCoords[1][j][0] + 60);
    t.setAttribute("y2",newCoords[1][j][1] + 180);
    t.setAttribute("style","stroke:rgb(99,99,99);stroke-width:0.5");
    xIndexes[0].appendChild(t);
    t = documentSVG.createElementNS(svgNS,"line");
    t.setAttribute("x1",newCoords[0][j][0] + 60);
    t.setAttribute("y1",newCoords[0][j][1] + 180);
    t.setAttribute("x2",newCoords[1][j][0] + 60);
    t.setAttribute("y2",newCoords[1][j][1] + 180);
    t.setAttribute("style","stroke:rgb(99,99,99);stroke-width:0.5");
    xIndexes[0].appendChild(t);
  }

/*
 t = documentSVG.createElementNS(svgNS,"line");
 t.setAttribute("x1",0);
 t.setAttribute("y1",0);
 t.setAttribute("x2",100);
 t.setAttribute("y2",100);
 t.setAttribute("style","stroke:rgb(99,99,99);stroke-width:0.5");
 xIndexes[0].appendChild(t);
 t = documentSVG.createElementNS(svgNS,"line");
 
 t.setAttribute("x1",0);
 t.setAttribute("y1",100);
 t.setAttribute("x2",100);
 t.setAttribute("y2",0);
 t.setAttribute("style","stroke:rgb(99,99,99);stroke-width:0.5");
 xIndexes[0].appendChild(t);
*/
}

function handleResults(data)
{
  if (window.getURL)
    responseText = data.content;
  else
    responseText = data;
  newCoords = JSON.parse(responseText);
  paint();
}
